    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
             body{
                 margin: 0px;
             }
            .bigBox{
                margin: 0 auto;
                text-align: center;
                padding-top: 200px;
            }
            input{
                width: 500px;

            }
            .bigBox ul{
                margin-left: 684px;
                margin-top: 0;
                border: 1px solid red;
                list-style: none;
                width: 503px;
                text-align: left;
                padding-left: 0;
            }
        </style>
    </head>

    <body>
    <div class="bigBox">
         <input type="text">
         <button>搜索</button>
         <!--<ul>-->
             <!--<li>2112</li>-->
             <!--<li>113123</li>-->
             <!--<li>2323</li>-->
             <!--<li>2321</li>-->
             <!--<li>32</li>-->
         <!--</ul>-->
    </div>
    <script>
       var bigBox=document.getElementsByClassName("bigBox")[0];
       var inpt=bigBox.children[0];
       arr=["12","123","1234","12345","23","234"];

       inpt.onkeyup=function () {
           var newArr=[];//千万不能放在外面放在外面的话每次点击键盘newArr都不会被清空，那样以前的数字就会累积
           var val=this.value;
           for(var i=0;i<arr.length;i++){
               if(arr[i].indexOf(val)===0) {//这是难点
                 newArr.push("<li>"+arr[i]+"</li>")
               }
           }
           var str=newArr.join("");
           if(bigBox.children[2]){
               bigBox.removeChild(bigBox.children[2]);

           }
           if(this.value.length===0||newArr.length===0){//两个任何一个都可以
               return;
           }
           var ul=document.createElement("ul");
           ul.innerHTML=str;
           bigBox.appendChild(ul);
       }
    </script>
    </body>
    </html>